<template>
  <div class="components-container">
    <aside style="font-size: small;">
      配置组织<strong>自己的</strong>菜单。
    </aside>
    <split-pane split="vertical" :default-percent="35">
      <template slot="paneL">
        <div class="left-container">
          <el-input v-model="group.filterText" placeholder="请输入关键字..." style="margin-bottom:5px;" />
          <el-tree ref="groupTree" :data="group.data" :filter-node-method="groupFilterNode" :props="group.props"
            highlight-current :node-key="group.nodeKey" @node-click="groupNodeClick">
          </el-tree>
        </div>
      </template>
      <template slot="paneR">
        <div class="right-container">
          <el-input v-model="menu.filterText" placeholder="请输入关键字..." style="margin-bottom:5px;" />
          <el-tree ref="menuTree" show-checkbox :data="menu.data" :filter-node-method="menuFilterNode"
            :props="menu.props" :node-key="menu.nodeKey">
          </el-tree>
          <div style="margin: 20px;">
            <el-button type="primary" :disabled="group.data.length==0" @click="submitGroupMenus" :loading="loading">提交
            </el-button>
            <el-button type="infor" @click="reset">重置</el-button>
          </div>
        </div>
      </template>
    </split-pane>
  </div>
</template>

<script>
  import splitPane from 'vue-splitpane'
  import {
    menuRoutes
  } from '@/router'
  import {
    deepClone
  } from '@/utils/index.js'
  import {
    SYS_MENU_API,
    SYS_GROUP_API
  } from '@/api/systemApi.js'

  export default {
    components: {
      splitPane
    },
    data() {
      return {
        loading: false,
        openPaths: [],
        selectedGroup: undefined,
        group: {
          filterText: '',
          data: [],
          nodeKey: 'groupId',
          props: {
            label: 'groupName'
          }
        },
        menu: {
          filterText: '',
          data: [],
          nodeKey: 'path',
          props: {
            label: (data) => {
              if (data.meta) return data.meta.title;
              return data.children[0].meta.title;
            },
            disabled: (data) => {
              if (this.openPaths.length === 1 && this.openPaths[0] === '*') {
                return false;
              } else {
                return this.openPaths.indexOf(data.path) === -1
              }
            }
          }
        }
      }
    },
    mounted() {
      this.loadInit();
    },
    methods: {
      async loadInit() {
        //菜单
        this.menu.data = deepClone(menuRoutes);
        //获取开放的菜单列表
        let res = await SYS_MENU_API.listAdministratorOpenMenus();
        this.openPaths = res.data;
        //组织列表
        var res2 = await SYS_GROUP_API.listNormalGroups();
        this.group.data = res2.data;
      },
      groupNodeClick(data, node) {
        let paths = (data.groupPaths || '').split(",");
        this.$refs.menuTree.setCheckedKeys(paths);
        this.selectedGroup = data;
      },
      groupFilterNode(value, data) {
        if (!value) return true
        return data.groupName.toUpperCase().indexOf(value.toUpperCase()) !== -1
      },
      menuFilterNode(value, data) {
        if (!value) return true
        if (data.meta) return data.meta.title.toUpperCase().indexOf(value.toUpperCase()) !== -1
        return data.children[0].meta.title.toUpperCase().indexOf(value.toUpperCase()) !== -1
      },
      async submitGroupMenus() {
        this.loading = true;
        let params = {
          groupId: this.selectedGroup.groupId,
          groupPaths: this.$refs.menuTree.getCheckedKeys().join(",")
        };
        let res = await SYS_MENU_API.updateGroupMenus(params);
        this.$message({
          message: res.message,
          type: 'success'
        })
        this.loading = false;
        this.selectedGroup.groupPaths = params.groupPaths;
      },
      reset() {
        this.$refs.menuTree.setCheckedKeys([]);
      },
    },
    watch: {
      'group.filterText'(val) {
        this.$refs.groupTree.filter(val)
      },
      'menu.filterText'(val) {
        this.$refs.menuTree.filter(val)
      }
    }
  }
</script>

<style scoped>
  .components-container {
    position: relative;
    height: 100vh;
  }

  .left-container {
    height: 100%;
  }

  .right-container {
    height: 100%;
  }
</style>
